<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <!--      <div class="login-left">-->
      <!--        <img class="login-left-img" src="@/assets/images/bg.jpg" alt="login" />-->
      <!--      </div>-->
      <video autoplay muted loop playsinline class="video">
        <source src="@/assets/map4/bg.mp4" type="video/mp4" />
        您的浏览器不支持视频标签。
      </video>
      <div class="login-form">
        <div class="login-logo">
          <!--          <img class="login-icon" src="@/assets/images/logo.svg" alt="" />-->
          <img class="login-icon" src="@/assets/images/logo.svg" alt="" />
          <h2 class="logo-text">{{ title }}</h2>
        </div>
        <div class="login-body">
          <div class="login-wrap">
            <el-alert :title="msg" type="info" show-icon style="margin: 24px 0 12px" />
            <el-form ref="formCustomRef" :model="formCustom" :rules="ruleCustom" t-id="form-login" size="large">
              <el-form-item prop="username" t-id="form-item-username">
                <el-input
                  v-model.trim="formCustom.username"
                  placeholder="请输入您的用户名"
                  :disabled="true"
                  @keyup.enter="submit"
                  autocomplete="on"
                  :max-length="64"
                  class="userInput"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <user />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="origin_password" t-id="form-item-password">
                <el-input
                  v-model="formCustom.origin_password"
                  type="password"
                  placeholder="原密码"
                  @keyup.enter="submit"
                  autocomplete="on"
                  class="userInput"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password" t-id="form-item-password">
                <el-input
                  v-model="formCustom.password"
                  type="password"
                  placeholder="新密码"
                  @keyup.enter="submit"
                  autocomplete="on"
                  class="userInput"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password_repeat" t-id="form-item-password">
                <el-input
                  v-model="formCustom.password_repeat"
                  type="password"
                  placeholder="重复新密码"
                  @keyup.enter="submit"
                  autocomplete="on"
                  class="userInput"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item t-id="login-submit-btn" style="margin: 61px 0 10px" class="login-btn">
                <el-button
                  type="primary"
                  :loading="loginLoading"
                  name="submit-btn"
                  t-id="form-btn-submint"
                  size="large"
                  style="width: 100%"
                  @click="submit(formCustomRef)"
                >
                  <span v-if="loginLoading"></span>
                  <span v-else>修改密码</span>
                </el-button>
              </el-form-item>
              <div style="margin-left: 100px; text-align: right" class="action-login">
                <router-link :to="{ name: 'login' }">登录已有账号</router-link>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="RetrievePassword">
import { ref, reactive } from "vue";
import { modifyPassword } from "@/api/modules/register";
import { validate } from "@/utils/validate";
import { useRoute, useRouter } from "vue-router";
import { ElForm, ElMessage } from "element-plus";
import { Login } from "@/api/interface";
const title = import.meta.env.VITE_GLOB_APP_TITLE;
type FormInstance = InstanceType<typeof ElForm>;
const formCustomRef = ref<FormInstance>();
// import LoginForm from "@/views/login/components/LoginForm.vue";
const router = useRouter();
const route = useRoute();
const loginLoading = false;
const formCustom = reactive<Login.ReqModifyPasswordForm>({
  username: unescape(route.query.username + ""),
  origin_password: "",
  password: "",
  password_repeat: ""
});
const msg = unescape(route.query.msg + "");
const validatePassCheck = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value !== formCustom.password) {
    callback(new Error("输入密码不一致"));
  } else {
    callback();
  }
};
const ruleCustom = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  origin_password: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "内容不能为空", trigger: "blur" },
    {
      required: true,
      message: "8-32个字符，且同时包含其中四项（大写字母、小写字母、数字、特殊符号）",
      trigger: "blur",
      pattern: validate.filterUserPassword
    }
  ],
  password_repeat: [
    { required: true, message: "内容不能为空", trigger: "blur" },
    { required: true, validator: validatePassCheck, trigger: "blur" }
  ]
};
let submitFlag = true;
// 提交表单
const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid && submitFlag) {
      submitFlag = false;
      // 创建后台需要的数据格式
      const subData = {};
      subData["username"] = formCustom.username;
      subData["origin_password"] = formCustom.origin_password;
      subData["password"] = formCustom.password;
      subData["password_repeat"] = formCustom.password;
      modifyPassword(subData).then(() => {
        submitFlag = true;
        ElMessage({
          type: "success",
          message: "修改密码成功"
        });
        router.push("/login");
      });
    } else {
      submitFlag = true;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "../login/index";
</style>
